<template>
	<view>
		<view class="header">
			<view class="header-1">我的会员</view>
			<view class="tip-text">
				<view class="tip-text-1">
					<image src="../../static/tu1.png"></image>
					<text>5593人已开通会员</text>
				</view>
				<view class="tip-text-2">购买查询</view>
			</view>
		</view>
		<view class="myLog">
			<view class="myLog-main">
				<view class="myLog-img">
					<image src="../../static/@1/wode 1_slices/zu428.png"></image>
				</view>
				<view class="myLog-text">
					<view class="myLog-text-1">
						<text class="myLog-text-log">立即登录</text>
						<button class="myLog-text-member">会员</button>
					</view>
					<view class="myLog-text-2">开通会员尊享VIP权益</view>
				</view>
			</view>
		</view>
		
		<view class="recommend">
			<view class="recommend-1 recommend-actived">
				 <view class="recommend-1-1">12个月</view>
				 <view class="recommend-1-2">￥45</view>
				  <view class="recommend-1-3">￥144</view>
			</view>
			<view class="recommend-1">
				<view class="recommend-1-1">3个月</view>
				<view class="recommend-1-2">￥18</view>
				 <view class="recommend-1-3">￥36</view>
			</view>
			<view class="recommend-1">
				<view class="recommend-1-1">1个月</view>
				<view class="recommend-1-2">￥8</view>
				 <view class="recommend-1-3">￥14</view>
			</view>
		</view>
		<view class="recommend-text">推荐</view>
		<view class="cgt">
			<view class="cgt-text">恭喜</view>
			<view class="cgt-text-1">您获得二折开通会员特权!</view>
		</view>
		<view class="activedNow">立即开通</view>
		<view class="throught-line"></view>
		<view class="privilege">
			<view class="pri-text-1">VIP特权</view>
			<view class="pri-text-2">
				<view class="pri-text-2-1">
					<view class="pri-text-2-1-1">
						<image src="../../static/111.png" mode=""></image>
					</view>
					<view class="pri-text-2-1-2">
						<view class="up">1000+精品名厨菜谱</view>
						<view class="low">大咖教学、轻松学会</view>
					</view>
				</view>
			 <view class="bian"></view>	
			 
			 
			
			 
			 <view class="pri-text-2-1">
			 					<view class="pri-text-2-1-1">
			 						<image src="../../static/222.png" mode=""></image>
			 					</view>
			 					<view class="pri-text-2-1-2">
			 						<view class="up">每周上新</view>
			 						<view class="low">新菜持续更新中</view>
			 					</view>
			 				</view>
			 <view class="bian"></view>	
			 
			 
			 <view class="pri-text-2-1">
			 					<view class="pri-text-2-1-1">
			 						<image src="../../static/333.png" mode=""></image>
			 					</view>
			 					<view class="pri-text-2-1-2">
			 						<view class="up">会员免广告打扰</view>
			 						<view class="low">体验更流畅</view>
			 					</view>
			 				</view>
			 <view class="bian"></view>	
			 
			 
			 <view class="pri-text-2-1">
			 					<view class="pri-text-2-1-1">
			 						<image src="../../static/444.png" mode=""></image>
			 					</view>
			 					<view class="pri-text-2-1-2">
			 						<view class="up">VIP尊贵身份标识</view>
			 						<view class="low">随时随地、与众不同</view>
			 					</view>
			 				</view>
			 <view class="bian"></view>	
			 
			 
			</view>
		</view>
		
		<view class="hua"></view>
		<view class="shuo">
			<view class="shuo-1-1">会员使用说明</view>
			<view class="shuo-1">1、会员服务一经开通不支持退款</view>
			<view class="shuo-1">2、如遇苹果手机支付问题，建议参考AppTore支付流程</view>
			<view class="shuo-1">3、若会员开通出现异常，请立即联系客户，我们会在2个工作日内出结果</view>
			<view class="shuo-1">4、会员出现常见问题，会员服务协议，会员隐私协议</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	page{
		position: relative;
	}
.header{
	height: 480rpx;
	width: 750rpx;
	background-color: rgb(49,49,49);
	overflow: hidden; 
	.header-1{
		color: white;
		line-height: 40rpx;
		height: 40rpx;
		text-align: center;
		font-size: 40rpx;
		margin-top: 112rpx;
		margin-bottom: 50rpx;
	}
	.tip-text{
		display: flex;
		justify-content: space-between;
		.tip-text-1{
			background-color: rgb(92, 92, 92);
			width: 446rpx;
			height: 48rpx;
			border-top-right-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			display: flex;
			align-items: center;
			image{
				margin-left: 24rpx;
				width: 168rpx;
				height: 36rpx;
			}
			text{
				font-size: 26rpx;
				margin-left: 14rpx;
				color: white;
			}
		}
		.tip-text-2{
			margin-right: 32rpx;
			color: white;
			font-size: 36rpx;
		}
	}
}
.myLog{
	width: 688rpx;
	height: 273rpx;
	// border: 1px solid red;
	position: absolute;
	top: 282rpx;
	left: 32rpx;
	border-radius: 10rpx;
	padding: 70rpx 0 126rpx 30rpx;
	box-sizing: border-box;
	margin-bottom: 200rpx;
	background-image: url("../../static/huiyuan108.png");
	background-position: center;
	background-repeat: no-repeat;
	// background-size: contain;
	
	.myLog-main{
		height: 108rpx;
		width: 400rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.myLog-img{
			width: 108rpx;
			height: 108rpx;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
		.myLog-text{
			margin-left: 18rpx;
			height: 100%;
			width: 380rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.myLog-text-1{
				height: 40rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 15rpx;
				.myLog-text-log{
					font-size: 40rpx;
					margin-right: 8rpx;
					height: 40rpx;
					line-height: 40rpx;
					color: rgb(123, 91,31);
				}
				.myLog-text-member{
					color: white;
					background-color: rgb(165, 165, 165);
					font-size: 26rpx;
					text-align: center;
					height: 34rpx;
					line-height: 34rpx;
					width: 125rpx;
				}
			}
			.myLog-text-2{
				height: 40rpx;
				width: 100%;
				font-size: 26rpx;
				color: rgb(123, 91,31);
			}
		}
	}
	
}
.recommend{
		padding: 0 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 234rpx;
		width: 686rpx;
		margin-top: 115rpx;
		.recommend-1{ 
			width: 212rpx;
			height: 234rpx;
			// border: 1px solid red;
			border: 2rpx solid rgb(224, 224, 224);
			border-radius: 30rpx;
			.recommend-1-1{
				height: 30rpx;
				line-height: 30rpx;
				width: 100%;
				text-align: center;
				margin-top: 48rpx;
				font-weight: bold;
				font-size: 30rpx;
				margin-bottom: 24rpx;
			}
			.recommend-1-2{
				color: rgb(222, 178, 100);
				font-size: 40rpx;
				margin-bottom: 32rpx;
				height: 40rpx;
				line-height: 40rpx;
				width: 100%;
				text-align: center;
				font-weight: bolder;
			}
			.recommend-1-3{
				color: rgb(164, 159, 160);
				font-size: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				text-decoration: line-through;
			}
		}
		.recommend-actived{
			border: 2rpx solid rgb(222, 178, 100);
			background-color: rgb(251, 247, 239);
		}
}

.recommend-text{
	width: 82rpx;
	height: 40rpx;
	font-size: 28rpx;
	color: white;
	line-height: 40rpx;
	text-align: center;
	font-weight: bold;
	background-color: rgb(222, 178, 100);
	position: absolute;
	top: 580rpx;
	left: 32rpx;
	border: 2rpx solid rgb(224, 224, 224);
	border-radius: 15rpx;
}
.cgt{
	position: absolute;
	top: 854rpx;
	left: 32rpx;
	display: flex;
	margin-bottom: 34rpx;
	.cgt-text{
		width: 72rpx;
		height: 40rpx;
		font-size: 28rpx;
		color:rgb(222, 178, 100);
		line-height: 40rpx;
		text-align: center;
		font-weight: bold;
		background-color: rgb(252, 231, 184);
	}
	.cgt-text-1{
		font-weight: bold;
		color: rgb(198, 184, 159);
		font-size: 28rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		margin-left: 18rpx;
	}
}
.activedNow{
	margin-top: 100rpx;
	height: 80rpx;
	width: 680rpx;
	border-radius: 30rpx;
	background-color: rgb(252, 241, 211);
	margin-left: 32rpx;
	line-height: 80rpx;
	text-align: center;
	font-weight: bolder;
	color: rgb(177, 150, 92);
	margin-bottom: 74rpx;
}
.throught-line{
	width: 750rpx;
	height: 28rpx;
	background-color: rgb(245, 247, 250);
}
.privilege{
	height: 550rpx;
	width: 750rpx;
	padding: 20rpx 0 0 32rpx;
	.pri-text-1{
		font-size: 44rpx;
		line-height: 44rpx;
		width: 100%;
		font-weight: bolder;
		margin-bottom: 42rpx;
	}
	.pri-text-2{
		height: 480rpx;
		width: 680rpx;
		// display: flex;
		// justify-content: space-between;
		.pri-text-2-1{
			width: 100%;
			height: 25%;
			display: flex;
			.bian{
				border: 2rpx solid rgb(245, 247, 250);
			}
			.pri-text-2-1-1{
				height: 80rpx;
				width: 80rpx;
				margin-right: 44rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.pri-text-2-1-2{
				height: 80rpx;
				width: 380rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-bottom: 4rpx;
				// align-items: center;
				.up{
					font-size: 30rpx;
					margin-bottom: 12rpx;
				}
				.low{
					color: rgb(223, 223, 223);
					font-size: 20rpx;
				}
			}
		}
	}
}
.hua{
	height: 28rpx;
	background-color: rgb(245, 247, 250);
	width: 100%;
}
.shuo{
	height: 370rpx;
	width: 750rpx;
	padding: 20rpx 0 0 32rpx;
	box-sizing: border-box;
	.shuo-1{
		font-size: 30rpx;
		margin-bottom: 22rpx;
		color: rgb(195, 195, 195);
	}
	.shuo-1-1{
		font-size: 40rpx;
		margin-bottom: 22rpx;
		font-weight: bold;
	}
}






</style>
